revision:
<div class="spec grid_C">
<p id="date"></p>
<p id="date-1"></p>
<p id="date-2"></p>
<p id="date-3"></p>
<p id="date-4"></p>
<p id="date-5"></p>
<p id="date-6"></p>
<p id="date-7"></p>
<p id="date-8"></p>
<p id="date-9"></p>
<p id="date-10"></p>
<p id="date-11"></p>
<p id="date-12"></p>
<p id="date-13"></p>
</div>
<script>
const date = new Date();
document.getElementById("date").innerHTML = "0 - today: " +
date.toLocaleDateString('en-US');
const dateOptions = {
weekday:'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
document.getElementById("date-1").innerHTML = "1 - today is " +
date.toLocaleDateString('en-US', dateOptions);
document.getElementById("date-2").innerHTML = "2 - " +
(date.toLocaleDateString('en-US', {month:'short', day: 'numeric'}));
document.getElementById("date-3").innerHTML = "3 - " +
(date.toLocaleDateString('fr-FR', {month:'long'}));
document.getElementById("date-4").innerHTML = "4 - " +
(date.toLocaleDateString('en-GB'));
document.getElementById("date-5").innerHTML = "5 - " +
(date.toLocaleDateString('ko-KR'));
document.getElementById("date-6").innerHTML = "6 - " +
(date.toLocaleDateString('ar-EG'));
document.getElementById("date-7").innerHTML = "7 - " +
(date.toLocaleDateString('cn-CN'));
const timeOptions = {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
};
document.getElementById("date-8").innerHTML = "8 - " +
(date.toLocaleTimeString('cn-CN', timeOptions));
const timeOptions_2 = {
hour12: false,
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
};
document.getElementById("date-9").innerHTML = "9 - " +
(date.toLocaleTimeString('en-US', timeOptions_2));
document.getElementById("date-10").innerHTML = "10 - " +
(date.toLocaleTimeString('en-US', {timezone: "America/Los_Angeles",}));
document.getElementById("date-11").innerHTML = "11 - " +
(date.toLocaleTimeString('en-US', {month: 'short'}));
document.getElementById("date-12").innerHTML = "12 - " +
(date.toLocaleTimeString('en-US', {hour: '2-digit'}));
document.getElementById("date-13").innerHTML = "13 - " +
(date.toLocaleTimeString('en-US', {...timeOptions, ...dateOptions}));
</script>
<div>
<div style="margin-left:5vw;" id="brussels"></div>
<div style="margin-left:5vw;" id="london"></div>
<div style="margin-left:5vw;" id="tokyo"></div>
<div style="margin-left:5vw;" id="new_york"></div>
<div style="margin-left:5vw;" id="arizona"></div>
</div>
<script>
function calculateDateTime(offset) {
var date = new Date();
var localTime = date.getTime();
var localOffset = date.getTimezoneOffset() * 60000;
var utc = localTime + localOffset;
var newDateTime = utc + (3600000 * offset);
var convertedDateTime = new Date(newDateTime);
return convertedDateTime.toLocaleString();
}
document.getElementById("brussels").innerHTML = "Brussels - time: " +
(calculateDateTime(1));
document.getElementById("london").innerHTML = "London - time: " +
(calculateDateTime(0));
document.getElementById("tokyo").innerHTML = "Tokyo - time: " +
(calculateDateTime(9));
document.getElementById("new_york").innerHTML = "New York - time: " +
(calculateDateTime(-5));
document.getElementById("arizona").innerHTML = "Arizona - time: " +
(calculateDateTime(-7));
</script>
<div>
<div id="digital" class="clock" onload="showTime()"></div>
<div id="digital-1" class="clock"></div>
<div id="digital-2" class="clock"></div>
<div id="digital-3" class="clock"></div>
</div>
<style>
#digital {position: relative; top: 5%; left:60%; transform: translateX(-50%) translateY(-50%);
color: black; font-size: 2vw; font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
#digital-1 {position: relative; top: 5%; left:60%; transform: translateX(-50%) translateY(-50%);
color: blue; font-size: 2vw; font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
#digital-2 {position: relative; top: 5%; left:60%; transform: translateX(-50%) translateY(-50%);
color: white; font-size: 2vw; font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
#digital-3 {position: relative; top: 5%; left:60%; transform: translateX(-50%) translateY(-50%);
color: red; font-size: 2vw; font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
</style>
<script>
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var tokyo = date.getHours()+1;
var brussels = date.getHours()-7;
var london = date.getHours()-8;
var session = "AM";
if(h == 0){ h = 12; }
if(h > 12){ h = h - 12; session = "PM"; }
if(tokyo > 12){ h = h - 12; session = "PM"; }
if(brussels > 12){ h = h - 12; session = "PM"; }
if(london > 12){ h = h - 12; session = "PM"; }
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
var tokyo_time = tokyo + ":" + m + ":" + s + " " + session;
var brussels_time = brussels + ":" + m + ":" + s + " " + session;
var london_time = london + ":" + m + ":" + s + " " + session;
document.getElementById("digital").innerText = "Shanghai: " + time;
document.getElementById("digital-1").textContent = "Tokyo: " + tokyo_time;
document.getElementById("digital-2").innerText = "Brussels: " + brussels_time;
document.getElementById("digital-3").textContent = "London: " + london_time;
setTimeout(showTime, 1000);
}
showTime();
</script>
<div class="spec grid_A">
<p id="date-A"></p>
<p id="date-B"></p>
</div>
<script>
function updateClock() {
var currentdate = new Date();
var day = currentdate.getDate();
var month = currentdate.getMonth() + 1;
var year = currentdate.getFullYear();
this.date = " " + day + "/" + month + "/" + year;
this.h = currentdate.getHours();
this.m = currentdate.getMinutes();
this.s = currentdate.getSeconds();
}
updateClock.prototype.run = function () {
setInterval(this.update.bind(this), 1000);
};
updateClock.prototype.update = function () {
this.updateTime(1);
var time = " @ "
+ this.h + ":"
+ this.m + ":"
+ this.s;
var datetime = this.date + time;
document.getElementById('date-A').innerHTML = "now: " + datetime;
return datetime;
};
updateClock.prototype.updateTime = function (secs) {
this.s += secs;
if (this.s >= 60) {
this.m++;
this.s = 0;
};
if (this.m >= 60) {
this.h++;
this.m = 0;
};
if (this.h >= 24) {
this.day++;
this.h = 0;
}
};
var newclock = new updateClock();
newclock.run();
var timedate = newclock.update();
console.log(timedate)
document.getElementById("date-B").innerHTML = "clock updated at: " + (timedate);
</script>
<div class=spec id="now"></div>
<script>
let now = new Date();
document.getElementById("now").innerHTML = "it is now: " + now;
</script>
<div>
<div id="digital-A"></div>
<div id="digital-B"></div>
</div>
<style>
#digital-A {position: relative; top: 20%; left:60%; transform: translateX(-50%) translateY(-50%);
color: black; font-size: 1.5vw; }
#digital-B {position: relative; top: 20%; left:60%; transform: translateX(-50%) translateY(-50%);
color: blue; font-size: 1.5vw; }
</style>
<script>
const nu = new Date();
document.getElementById("digital-A").innerHTML = "it is now: " + nu.getHours();
document.getElementById("digital-B").innerHTML = "it is now UTC: " + nu.getUTCHours();
</script>
<div class="spec-2" id="bar"></div>
<script>
$(document).ready(function(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//decides if am or pm
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
if (minutes < 10)
minutes = "0" + minutes
$('#bar').html(hours + ":" + minutes + " " + suffix);
});
</script>
The UNIX timestamp is an integer that represents the number of seconds elapsed since January 1, 1970.
You can fetch the current timestamp:
by calling the now() method on Date object,
by using the Javascript Date getTime() function,
by using the JavaScript valueOf() method.
<div>
<p>The <b>UNIX timestamp</b> is an integer that represents the number of seconds elapsed
since January 1, 1970.</p>
<p>You can fetch the current timestamp:</p>
<p style="margin-left:1vw;">by calling the <b>now() method on Date object</b>,<br>
by using the Javascript <b>
Date getTime() function</b>, <br> by using the JavaScript <b>valueOf() method</b>.</p>
<p style="margin-left:2vw;" id="stamp"></p>
<p style="margin-left:2vw;" id="stamp1"></p>
<p style="margin-left:2vw;" id="stamp2"></p>
<p style="margin-left:2vw;" id="stamp3"></p>
<p style="margin-left:2vw;" id="stamp4"></p>
</div>
<script>
//Date.now() method
let ms = Date.now();
console.log(ms);
document.getElementById("stamp").innerHTML = ms;
//valueOf() method
let milliseconds = new Date().valueOf();
console.log(milliseconds);
document.getElementById("stamp1").innerHTML = milliseconds;
// getTime() method
let millisecs = new Date().getTime();
console.log(millisecs);
document.getElementById("stamp2").innerHTML = millisecs;
// unary plus
let millis = +new Date();
console.log(millis);
document.getElementById("stamp3").innerHTML = millis;
//number constructor
let mill = Number(new Date());
console.log(mill);
document.getElementById("stamp4").innerHTML = mill;
</script>
<div>
<p style="margin-left:2vw;" id="stamp5"></p>
<p style="margin-left:2vw;" id="stamp6"></p>
<p style="margin-left:2vw;" id="stamp7"></p>
<p style="margin-left:2vw;" id="stamp8"></p>
<p style="margin-left:2vw;" id="stamp9"></p>
<p style="margin-left:2vw;" id="stamp10"></p>
<p style="margin-left:2vw;" id="stamp11"></p>
<p style="margin-left:2vw;" id="stamp12"></p>
<p style="margin-left:2vw;" id="stamp13"></p>
<p style="margin-left:2vw;" id="stamp14"></p>
<p style="margin-left:2vw;" id="stamp15"></p>
<p style="margin-left:2vw;" id="stamp16"></p>
<p style="margin-left:2vw;" id="stamp17"></p>
</div>
<script>
var timestamp = 1655555253155
var date = new Date(timestamp);
document.getElementById("stamp5").innerHTML = date.getTime();
document.getElementById("stamp6").innerHTML = date;
document.getElementById("stamp7").innerHTML = "date: " + date.getDate() + '/' +
(date.getMonth()+1) + "/" + date.getFullYear() + " at " + date.getHours() + ":" + date.getMinutes();
// convert to DateString()
var ts= new Date(1655555630000);
document.getElementById("stamp8").innerHTML = "toDateString(): " + ts.toDateString();
// convert to ISOString()
document.getElementById("stamp9").innerHTML = "toISOString(): " + ts.toISOString();
//convert to GMTString()
document.getElementById("stamp10").innerHTML = "toGMTString(): " + ts.toGMTString();
// convert to JSON()
document.getElementById("stamp11").innerHTML = "toJSON(): " + ts.toJSON();
// convert to LocaleDateString()
document.getElementById("stamp12").innerHTML = "toLocaleDateString(): " + ts.toLocaleDateString();
// convert to LocaleTimeString()
document.getElementById("stamp13").innerHTML = "toLocaleTimeString(): " + ts.toLocaleTimeString();
// convert to LocaleString()
document.getElementById("stamp14").innerHTML = "toLocaleString(): " + ts.toLocaleString();
// convert to String()
document.getElementById("stamp15").innerHTML = "toString(): " + ts.toString();
// convert to TimeString()
document.getElementById("stamp16").innerHTML = "toTimeString(): " + ts.toTimeString();
// convert to UTCString()
document.getElementById("stamp17").innerHTML = "toUTCString(): " + ts.toUTCString();
</script>